<template>
  <div class="orderstate">
    <div class="orderchange"><span>订单处理</span></div>
    <el-form>
      <el-form-item label="订单状态">
        <el-radio-group v-model="form.radio">
          <el-radio :label="1">已完成</el-radio>
          <el-radio :label="2">处理中</el-radio>
          <el-radio :label="3">转未处理</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 完成日期 -->
      <el-form-item
        label="完成日期"
        class="completedata"
        v-show="form.radio === 1"
      >
        <el-date-picker
          v-model="form.value1"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <!-- 处理备注 -->
      <el-form-item label="处理备注" v-show="form.radio === 2">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <!-- 按钮 -->

      <div class="btnbox">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button @click="resetForm">关闭</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { ChangeOrderStatusAxios } from "../../../http/apis/orderApi/index";
export default {
  name: "OrderState",
  data() {
    return {
      form: {
        radio: 1,
        value1: "",
        desc: "",
      },
      id: "",
      state: "",
      info: "",
    };
  },
  created() {
    // 获取id
    // console.log(this.$route);
    this.info = this.$route.query.info;
    console.log("当前info信息", this.info);
    this.id = this.$route.query.info.order_id;
    console.log("当前订单id", this.id);

    // 获取当前路由参数
    this.state = this.$route.query.state;
    console.log("当前路由参数", this.state);
  },
  methods: {
    submit() {
      const state = this.form.radio;
      console.log(typeof state);
      ChangeOrderStatusAxios(state, this.id)
        .then((res) => {
          console.log("订单状态请求成功", res.data);
        })
        .catch((err) => {
          console.log("订单状态请求失败", err);
        });
      if (this.state == "list") {
        this.$router.push("/order/orderlist");
      } else if (this.state == "clientname") {
        this.$router.push({
          path: "/information/clientname",
          query: { info: this.info },
        });
      } else if (this.state == "orderadd-day") {
        this.$router.push("/order/orderadd-day");
      } else if (this.state == "orderadd-week") {
        this.$router.push("/order/orderadd-day");
      } else if (this.state == "orderadd-month") {
        this.$router.push("/order/orderadd-month");
      }
    },
    // 关闭
    resetForm() {
      if (this.state == "list") {
        this.$router.push("/order/orderlist");
      } else if (this.state == "clientname") {
        this.$router.push("/information/clientname");
      } else if (this.state == "orderadd-day") {
        this.$router.push("/order/orderadd-day");
      } else if (this.state == "orderadd-week") {
        this.$router.push("/order/orderadd-day");
      } else if (this.state == "orderadd-month") {
        this.$router.push("/order/orderadd-month");
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.orderstate {
  width: 400px;
  margin: 0 auto;
}
.orderchange {
  width: 400px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
.orderchange span {
  font-size: 20px;
}
.btnbox {
  width: 150px;
  margin: 20px auto;
}
</style>>
